<template>
	<view class="content">
		<mescroll-body height="500px" @init="mescrollInit" :sticky="true" :down="down" @down="downCallback"
			@up="upCallback">
			<view class="nav sticky-tabs">
				<uni-nav-bar backgroundColor="transparent" left-icon="left" @clickLeft="goback">
					<view class="tab flex_r_between">
						<text @click="onTabIndex(2)" :id="tabIndex == 2 ? 'select' : ''">已开发票</text>
						<text @click="onTabIndex(1)" :id="tabIndex == 1 ? 'select' : ''">未开发票</text>
					</view>
					<block slot="right">
						<text @click="$util.toUrl('/otherpages/order/invoice/check')">开发票</text>
					</block>
				</uni-nav-bar>
			</view>

			<view class="tabbar">
				<view @click="onTab(0)" :id="select == 0?'select':''">全部<i v-if="select == 0"></i></view>
				<view @click="onTab(3)" :id="select ==3?'select':''">旅游<i v-if="select == 3"></i></view>
				<view @click="onTab(2)" :id="select==2?'select':''">酒店<i v-if="select == 2"></i></view>
			</view>
			<view class="list">
				<!-- 类型:1=上门服务,2=酒店,3=门票,4=电影票,5=开通会员 -->
				<view class="item" v-for="(item,index) in list" :key="index">

					<view class="logo" v-if="item.type == 2">
						<view class="inner-img" style="background-color: #EDE1F7;">
							<image src="../../../static/index/jiudian-icon.png"></image>
						</view>
						<text>{{item.hotel_name}}</text>
					</view>
					<view class="logo" v-if="item.type == 3">
						<view class="inner-img" style="background-color: #CEDAF5;">
							<image src="../../../static/index/lvyou-icon.png"></image>
						</view>
						<text>{{item.scenic_name}}</text>
					</view>
					<view class="product" v-if="item.type == 2">
						<image :src="item.hotel_image" @error="imageError($event,item)" mode="aspectFill"></image>
						<view class="detail">
							<view class="title">{{item.room_name}}</view>
							<view class="text">{{item.createtime}}</view>
							<view class="text">总价:￥{{item.price}}</view>
						</view>
					</view>
					<view class="product" v-if="item.type == 3">
						<image :src="item.images[0]" @error="imageError($event,item)" mode="aspectFill"></image>
						<view class="detail">
							<view class="title">{{item.product_name}}</view>
							<view class="text">{{item.travelDate}}</view>
							<view class="text">总价:￥{{item.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				select: 0,
				tab: 0,
				page: 1,
				total: 0,
				list: [],
				tabIndex: 2,
				typeIndex: '2,3',
				down: {
					auto: false
				},
				fapiao_status: 1 //开票状态:1=未开票,2=已开票
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			imageError(e, item) {
				if (item.type == 3) {
					item.images[0] = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				} else {
					item.hotel_image = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				}
			},
			onTab(e) {
				this.select = e
				if (e == 0) {
					this.typeIndex = '2,3'
				} else {
					this.typeIndex = e
				}
				this.downCallback()
			},
			onTabIndex(e) {
				this.tabIndex = e
				this.downCallback()
			},
			toGetInvoice() {

			},
			downCallback(page) {
				this.list = []
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				var that = this
				this.request.httpTokenRequest({
					url: "order/getOrderList",
					method: "get"
				}, {
					fapiao_status: this.tabIndex, //开票状态:1=未开票,2=已开票
					status: "2,3,4,5,6",
					type: this.typeIndex,
					page: page.num
				}).then(function(res) {
					if (res.code == 0) {
						res.data.data.map(item => {
							if (item.type == 2 || item.type == 3) {
								that.list.push(item)
							}
						})
						that.mescroll.endSuccess(that.list.length,that.list.length == res.data.total?false:true)
					} else {
						this.mescroll.endErr()
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		background-color: #F5F7F8;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.tab {
			width: 284rpx;
			height: 50rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 0 2rpx;
			margin: auto;

			text {
				width: 140rpx;
				height: 46rpx;
				background: #FFF;
				border-radius: 32rpx;
				font-size: 24rpx;
				color: #272636;
				line-height: 46rpx;
				text-align: center;
			}

			#select {
				background: #EF5233;
				color: #FFF;
			}
		}
	}

	.tabbar {
		padding: 0rpx 32rpx 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			height: 39rpx;
			font-size: 30rpx;
			color: #08090A;
			line-height: 39rpx;
			position: relative;

			i {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 11rpx;
				background: #EF5233;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.list {

		.item {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			// 		.name {
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: space-between;

			.logo {
				display: flex;
				align-items: center;

				.inner-img {
					background-color: #028777;
					border-radius: 50%;
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					padding-top: 9rpx;
				}

				image {
					width: 26rpx;
					height: 22rpx;
				}

				text {
					font-size: 30rpx;
					color: #08090A;
					line-height: 42rpx;
				}

				// }

				.status {}
			}

			.product {
				display: flex;
				margin: 30rpx 0 30rpx;

				image {
					width: 142rpx;
					height: 190rpx;
					margin-right: 23rpx;
				}

				.detail {
					flex: 1;

					.title {
						font-size: 28rpx;
						color: #656667;
						line-height: 40rpx;
					}

					.text {
						font-size: 24rpx;
						color: #656667;
						line-height: 33rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.content {
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 54px) 30rpx 20rpx;
	}
</style>